<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
  Vue中常用的按键别名:
    enter  回车
    delete 删除键(捕获"删除"和"退格"键)
    esc    退出
    space  空格
    tab    换行(特殊,必须配合@keydowm去使用)
    up     向上
    down   向下
    left   向左
    right  向右

   Vue未提供别名的按键,可以使用按键原始的key值去绑定, 但注意要转为kebab-case(短横线命名)

   系统修饰键(用法特殊): ctrl、alt、shift、meta
    配合keyup使用: 按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发
    配合keydown使用: 正常触发事件

   也可以使用keyCode去指定具体的按键(不推荐)mdn网站搜索keyCode发现已经弃用

   Vue.config.keyCodes.自定义键名 = 键码, 可以去定制按键别名
-->
    <div id="app">
      <h2>欢迎{{name}}</h2>
      <input type="text" placeholder="按下回车提示输入" @keyup.delete ="showInfo">
    </div>

</body>

<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
      name: '呆大王'
    },
    methods: {
      showInfo(event) {
        // if (event.keyCode != 13)return
        console.log(event.target.value)
        // this.name = event.target.value
      }
      // 监听键盘事件
      // 监听键盘按下事件
      // 监听键盘抬起事件
      // 监听键盘按下并抬起事件
      // 监听键盘按下并持续事件
      // 监听键盘抬起并持续事件
      // 监听键盘按下并抬起
    }
  })
</script>
</html>